<!-- 地址选择组件 -->
<template>
  <el-form :model="form" class="demo-ruleForm" :rules="rules" ref="form" label-position="top">

  <el-row class="address">
      <el-col :span="5" style="margin-right:10px">
        <el-form-item prop="province">
        <el-select v-model="form.province" placeholder="请输入省" @change="proChange" >
          <el-option
            v-for="item in provinces"
            :key="item.value"
            :value="item.value">
          </el-option>
        </el-select>
        </el-form-item>
      </el-col>

    <el-col :span="5" style="margin-right:10px">
      <el-form-item  prop="city">

      <el-select v-model="form.city" placeholder="请输入市" @change="cityChange" >
        <el-option
          v-for="item in citys"
          :key="item.value"
          :value="item.value">
        </el-option>
      </el-select>
      </el-form-item>

    </el-col>

    <el-col :span="12">
      <el-form-item  prop="detail">

      <el-input
        placeholder="请填写详细地址"
        :number="true"
        v-model="form.detail">
      </el-input>
      </el-form-item>

    </el-col>

  </el-row>
</el-form>
</template>
<script>
import addressData from './address-data.js'
import store from '../store/store.js'
function formatData(data) {
  var result = []
  for (var key in data) {
    result.push({
      value: key
    })
  }
  return result
}

export default {
  name: 'activePublic',
  props: ['province', 'city', 'detail', 'isAddressTrue'],
  data: function() {
    return {
      rules: {
        province: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        city: [{ required: true, message: '请选择城市', trigger: 'change' }],
        detail: [
          { required: true, message: '请填写详细地址', trigger: 'change' }
        ]
      },
      form: {
        province: this.province,
        city: this.city,
        detail: this.detail
      },
      provinces: formatData(addressData)
    }
  },
  watch: {
    form: {
      handler: function() {
        store.commit('setRuleForm', this.form)
      },
      deep: true
    },
    ifCheckFrom: function(val, oldVal) {
      if (val) {
        this.$refs.form.validate(valid => {})
      }
    }
  },
  computed: {
    citys: function() {
      return formatData(addressData[this.form.province])
    },
    ifCheckFrom: function() {
      return this.isAddressTrue
    }
  },
  methods: {
    // 省份获取
    proChange: function(val, oldVal) {
      if (oldVal) {
        this.form.city = ''
        this.form.detail = ''
      }
      var data = formatData(addressData[this.form.province])
      for (var i = 0; i < data.length; i++) {
        this.$set(this.citys, i, data[i])
      }
    },
    // 城市获取
    cityChange: function(val, oldVal) {
      if (oldVal) {
        this.form.detail = ''
      }
    }
  }
}
</script>
<style>
.address .el-form-item {
  margin-bottom: 0 !important;
  margin-right: 0 !important;
}
</style>
